<template>
    <div class="ranks-container">
        <div class="rank-title">
            <span>{{ $t('message.stream.c') }}</span>
            <JButtons :list="btns" v-model="inIndex" @change="onTypeChange"></JButtons>
        </div>
        <div class="rank-lodding" v-if="inLoding">
            <JLoding></JLoding>
        </div>
        <div class="rank-empty" v-if="inData.length == 0">
            <JEmpty></JEmpty>
        </div>
        <div v-else>
            <div class="rank-items d-flex" v-for="(item, index) in inData" :key="index">
                <div class="rank-top" :style="rankBg(index)">{{ index + 1 }}</div>
                <img :src="getImg(item.symbol)" class="rank-logo" />
                <span class="rank-name coin-link" @click="onDetail(item)">{{ item.symbol }}</span>
                <v-tooltip location="top center" activator="parent">
                    <template v-slot:activator="{ props }">
                        <span class="rank-line">
                            <v-progress-linear :model-value="item.inRange" color="#0DCB81" :bg-opacity="1"
                                bg-color="#F6475D" :height="20"></v-progress-linear>
                        </span>
                    </template>
                    <!-- <div class="tooltip-item">1231</div> -->
                   <Xtips :item="item"></Xtips>
                </v-tooltip>
                <span class="rank-price"> ${{ item.totalUsd }}</span>
            </div>
        </div>
    </div>
    <!-- <div class="ranks-container">
        <div class="rank-title">
            <span>{{ $t('message.stream.b') }}</span>
            <JButtons :list="btns" v-model="outIndex" @change="(e) => onTypeChange('out', e)"></JButtons>
        </div>
        <div class="rank-lodding" v-if="outLoding">
            <JLoding></JLoding>
        </div>
        <div class="rank-empty" v-if="outData.length == 0">
            <JEmpty></JEmpty>
        </div>
        <div v-else>
            <div class="rank-items d-flex" v-for="(item, index) in outData" :key="index">
                <span class="rank-top" :style="rankBg(index)">{{ index + 1 }}</span>
                <img :src="getImg(item.symbol)" class="rank-logo" />
                <span class="rank-name coin-link" @click="onDetail(item)">{{ item.symbol }}</span>
                <span class="rank-line">
                    <v-progress-linear :model-value="item.plan" color="#F6475D" bg-color="#25282F"
                        :height="20"></v-progress-linear>
                </span>
                <span class="rank-price">
                    ${{ item.usd }}
                </span>
            </div>
        </div>
    </div> -->
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, StyleValue, onMounted,onUnmounted } from "vue";
import { URL_TRADE_TOP, URL_CAPITAL_INOUT } from '@/comm/api';
import JNumber from "@/components/j-number/index.vue"
import { url } from "inspector";
import { get } from "@/comm/request";
import { useTokens } from "@/stores/tokens";
import JEmpty from "@/components/j-empty/index.vue";
import { formatBigNumber, scientificToDecimal } from "@/comm/format";
import JLoding from "@/components/j-loding/index.vue";
import JButtons from "@/components/j-buttons/index.vue";
import Xtips from './ranktooltip.vue'
const inLoding = ref(true)
const outLoding = ref(true)
const inData = ref<any>([]);
const outData = ref<any>([]);
const tokens = useTokens();
const btnsData = [
    {
        label: "H",
        value: "H"
    },
    {
        label: "D",
        value: "D"
    }
];
const btns = ref(btnsData);
const inIndex = ref(btns.value[0]);
const outIndex = ref(btns.value[0]);
const getImg = (str: string) => {
    return tokens.getImg(str);
};

const rankBg = (index: number) => {
    let styleObject: StyleValue = {
    }
    if (index == 0) {
        styleObject = {
            'background-image': `url('/src/assets/svg/stream/top1.svg')`,
        }
    }
    else if (index == 1) {
        styleObject = {
            'background-image': `url('/src/assets/svg/stream/top2.svg')`,
        }
    }
    else if (index == 2) {
        styleObject = {
            'background-image': `url('/src/assets/svg/stream/top3.svg')`,
        }
    }
    else {
        styleObject = {
            'background-image': `url('/src/assets/svg/stream/topother.svg')`,
        }
    }
    return styleObject
}
const getData = async (interval: any) => {
    const res: any = await get(URL_CAPITAL_INOUT, { interval })
    console.log('获取inout排名数据', res)
    if (res.data.length > 0) {
        let list = res.data
        for await (const item of list) {
            item.totalAmout = item.inTotalAmount + Math.abs(item.outTotalAmount)
            item.totalUsd = +(item.inTotalUsd + item.outTotalUsd).toFixed(2)
            item.inRange = +((item.inTotalAmount / item.totalAmout) * 100).toFixed(2)
            if (item.inRange < 1) {
                item.inRange = 1
            }
            item.totalUsd = formatBigNumber(item.totalUsd)
        }
        list = list.slice(0, 20)
        console.log('流出流出占比数组', list)
        return Promise.resolve(list)
    }
}
const onDetail = (coin: any) => {
    window.open("/token/" + coin.contractAddress);
};
const initData = async () => {
    inData.value = await getData(inIndex.value.value)
    console.log('获取', inData.value)
    inLoding.value = false
}
const onTypeChange = async (e: any) => {
    inLoding.value = true
    inIndex.value = e
    inData.value = await getData(inIndex.value.value)
    inLoding.value = false
}

let tid:any;
onMounted(() => {
    initData()
    tid = setInterval(()=>{
        console.log('聪明钱顶级流入流出！！！！')
        initData()
    },10000)
})
onUnmounted(()=>{
    clearInterval(tid)
})
</script>


<style lang="less" scoped>
:deep(.v-progress-linear) {
    border-radius: 4px;
}

.tooltip-item {
    border-radius: 4px;
    padding: 12px;
    background: #24292d;
    z-index: 12;
    pointer-events: none;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
}

.ranks-container {
    width: 100%;
    background-color: var(--card);
    padding: 20px 16px 20px 20px;
    border-bottom: 1px dashed #32363F;
    position: relative;
    min-width: 350px;

    .rank-empty {
        width: 100%;
    }

    .rank-lodding {
        width: 100%;
        // height: 400px;
    }

    &:last-child {
        border-bottom: none;
    }

    .rank-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 16px;
        color: var(--color-2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: var(--font-family);
    }

    .rank-items {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        // justify-content: space-between;
        gap: 6px;



        .rank-top {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            // background-color: aqua;
            font-size: 12px;
            font-weight: 600;
            color: var(--color-2);
        }

        .rank-logo {
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }

        .rank-name {
            width: 50px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            font-family: var(--font-family);

            &:hover {
                text-decoration: underline;
            }
        }

        .rank-line {
            // flex: 1;
            width: 162px;
            background-color: #25282F;
            border-radius: 4px;
        }

        .rank-price {
            flex: 1;
            font-size: 14px;
            font-family: var(--font-family);
        }
    }
}
</style>
